import React from 'react'
import AIPlanCard from "../AIPLanCard/AIPLanCard";
import './AIPlanList.css'

const AIPlanList = props => {

    const {
        planList,
        filter,
    } = props

    let listToRender
    if (filter === 'all') {
        listToRender = planList
    } else if (filter === 'available') {
        listToRender = planList.filter(p => p.status === true)
    } else if (filter === 'closed') {
        listToRender = planList.filter(p => p.status !== true)
    }

    return <div className='ai-plan-list-ctn flex-space-between-align-center flex-wrap-container'>

        {listToRender.map((planData, index) => {

            return <AIPlanCard planData={planData} key={index}/>

        })}

    </div>

}

export default AIPlanList